<template>
    <title-box title="直流信息">
        <div class="x-content-inner x-content-maxheight">
            <!-- item -->
            <template v-for="item in 14">
                <div v-if="isExit(item)" :key="item" class="x-direct">
                    <h3>PV{{ item }}</h3>
                    <!-- 指标小号形式，追加 mini -->
                    <ul class="x-target-list mini columns-3">
                        <li>
                            <h4 class="x-target-title">电压</h4>
                            <div class="x-target-content">
                                <span>{{ toFixed(props.devicesDayPower['mv' + item]) }}V</span>
                            </div>
                        </li>
                        <li>
                            <h4 class="x-target-title">电流</h4>
                            <div class="x-target-content">
                                <span>{{ toFixed(props.devicesDayPower['mi' + item]) }}A</span>
                            </div>
                        </li>
                        <li>
                            <h4 class="x-target-title">功率</h4>
                            <div class="x-target-content">
                                <span>{{ toFixed(props.devicesDayPower['mi' + item] * props.devicesDayPower['mv' + item]) }}W</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </template>
        </div>
    </title-box>
</template>
<script setup>
import { computed } from 'vue'
import TitleBox from '/@/components/TitleBox/index.vue'

const props = defineProps({
    devicesDayPower: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const toFixed = computed(() => {
    return power => {
        return power ? power.toFixed(2) : '0.00'
    }
})

const isExit = computed(() => {
    return num => {
        return props.devicesDayPower['mv' + num] && props.devicesDayPower['mi' + num]
    }
})
</script>
